<template>
  <div class="mcp-services-container">
    <div class="services-header">
      <!-- 左侧：创建第三方服务按钮 -->
      <div class="header-left">
        <el-button @click="openCreateThirdPartyDialog" round>
          <el-icon class="mr-1">
            <Plus />
          </el-icon>
          创建第三方服务
        </el-button>
        <el-button @click="goToCreateService" round>
          <el-icon class="mr-1">
            <Shop />
          </el-icon>
          从模板创建
        </el-button>
      </div>

      <!-- 右侧：搜索和筛选条件 -->
      <div class="header-right">
        <div class="search-filters">
          <el-input 
            v-model="searchCondition.name" 
            placeholder="搜索服务名称" 
            clearable 
            @input="handleSearch"
            class="search-input"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          
          <el-select 
            v-model="searchCondition.status" 
            placeholder="选择状态" 
            clearable 
            @change="handleSearch"
            class="status-select"
          >
            <el-option label="全部状态" value="" />
            <el-option label="运行中" value="running" />
            <el-option label="已停止" value="stopped" />
            <el-option label="错误" value="error" />
          </el-select>
          
          <el-select 
            v-model="searchCondition.module_id" 
            placeholder="选择模板" 
            clearable 
            @clear="handleSearch"
            @change="handleSearch"
            class="module-select"
          >
            <el-option 
              v-for="(module, index) in modules" 
              :key="module.id" 
              :label="module.name" 
              :value="module.id"
            >
              <span class="option-text">{{ index + 1 }}. {{ module.name }}</span>
            </el-option>
          </el-select>
          
          <el-select 
            v-model="searchCondition.user_id" 
            placeholder="选择创建者" 
            clearable 
            @clear="handleSearch"
            @change="handleSearch"
            class="user-select"
          >
            <el-option label="全部创建者" :value="null" />
            <el-option 
              v-for="(user, index) in users" 
              :key="user.id" 
              :label="user.username" 
              :value="user.id"
            >
              <span class="option-text">{{ index + 1 }}. {{ user.username }}</span>
              <el-icon v-if="user.is_admin" class="admin-icon">
                <UserFilled />
              </el-icon>
            </el-option>
          </el-select>
        </div>
        
        <el-button type="primary" @click="handleSearch" :loading="loading" class="search-button" round>
          <el-icon class="mr-1">
            <Search />
          </el-icon>
          搜索
        </el-button>
      </div>
    </div>

    <div class="mcp-services-content">
      <el-row :gutter="24" v-loading="loading">
        <!-- 服务卡片 -->
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" v-for="service in services" :key="service.id"
          class="service-col">
          <el-card class="service-card" shadow="hover" :body-style="{ padding: '0px' }"
            :class="{ 'service-running': service.status === 'running' }">
            <div class="card-content">
              <div class="card-header">
                <div class="service-status">
                  <span class="status-dot" :class="getStatusClass(service.status)"></span>
                  <span class="status-text">{{ getStatusText(service.status) }}</span>
                  <!-- 服务类型标识 -->
                  <el-tag v-if="service.service_type === 1" type="primary" size="small" class="service-type-tag">
                    内置服务
                  </el-tag>
                  <el-tag v-else-if="service.service_type === 2" type="warning" size="small" class="service-type-tag">
                    第三方服务
                  </el-tag>
                  <!-- 公开状态标识 -->
                  <el-tag 
                    v-if="service.is_public" 
                    type="success" 
                    size="small" 
                    class="public-tag"
                    :class="{ 'clickable-tag': service.can_edit }"
                    @click.stop="service.can_edit && togglePublicStatus(service)"
                  >
                    公开
                  </el-tag>
                  <el-tag 
                    v-else 
                    type="info" 
                    size="small" 
                    class="public-tag"
                    :class="{ 'clickable-tag': service.can_edit }"
                    @click.stop="service.can_edit && togglePublicStatus(service)"
                  >
                    私有
                  </el-tag>
                </div>

                <!-- 右上角操作按钮 -->
                <div class="service-actions">
                  <!-- 无权限编辑时显示提示 -->
                  <el-tooltip v-if="!service.can_edit" content="您没有权限编辑此服务" placement="top">
                    <el-icon class="no-permission-icon">
                      <Lock />
                    </el-icon>
                  </el-tooltip>

                  <!-- 有权限时显示操作按钮 -->
                  <template v-if="service.can_edit">
                    <el-tooltip content="启动服务" v-if="service.status !== 'running'">
                      <el-button type="success" circle size="small" @click.stop="handleStartService(service.service_uuid)"
                        class="action-button">
                        <el-icon>
                          <VideoPlay />
                        </el-icon>
                      </el-button>
                    </el-tooltip>

                    <el-tooltip content="停止服务" v-if="service.status === 'running'">
                      <el-button type="warning" circle size="small" @click.stop="handleStopService(service.service_uuid)"
                        class="action-button">
                        <el-icon>
                          <VideoPause />
                        </el-icon>
                      </el-button>
                    </el-tooltip>

                    <el-tooltip content="删除服务">
                      <el-button type="danger" circle size="small"
                        @click.stop="handleUninstallService(service.service_uuid)" class="action-button">
                        <el-icon>
                          <Delete />
                        </el-icon>
                      </el-button>
                    </el-tooltip>
                  </template>

                  <!-- 参数配置按钮（所有用户都可以查看） -->
                  <el-tooltip content="参数配置" v-if="service.can_edit">
                    <el-button type="primary" circle size="small" @click.stop="viewServiceParams(service)"
                      class="action-button">
                      <el-icon>
                        <Setting />
                      </el-icon>
                    </el-button>
                  </el-tooltip>
                </div>
              </div>

              <div class="service-info">
                <!-- 模板和名称放一行 -->
                <div class="detail-row">
                  <div class="service-title-row">
                    <el-text class="service-label">名称：</el-text>
                    <el-text truncated class="service-value">
                      {{ service.name }}
                    </el-text>
                  </div>
                  <div class="service-title-row">
                    <el-text class="service-label">模板：</el-text>
                    <el-text truncated class="service-value">
                      {{ service.module_name || '未命名服务' }}
                    </el-text>
                  </div>
                </div>
                <!-- 描述 -->
                <el-text truncated class="service-description">
                  {{ service.description || '暂无描述' }}
                </el-text>
              </div>

              <div class="service-details">
                <!-- 创建者和创建时间放一行 -->
                <div class="detail-row">
                  <div class="detail-item">
                    <span class="detail-label">创建者</span>
                    <span class="detail-value">{{ service.username || '未知' }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="detail-label">创建时间</span>
                    <span class="detail-value">{{ formatDate(service.created_at) }}</span>
                  </div>
                </div>
                
                <div class="detail-item">
                  <span class="detail-label">SSE URL</span>
                  <div class="url-container">
                    <el-tooltip content="复制URL" placement="top">
                      <el-text class="url-text" type="primary" truncated @click.stop="copyUrl(service.sse_url)">
                        {{ service.sse_url }}
                      </el-text>
                    </el-tooltip>
                    <el-button link type="primary" @click.stop="copyUrl(service.sse_url)" class="copy-button">
                      <el-icon>
                        <DocumentCopy />
                      </el-icon>
                    </el-button>
                    <el-tooltip content="复制为egovakb格式" placement="top">
                      <el-button link type="success" @click.stop="copyAsEgovakbUrl(service.sse_url)"
                        class="copy-button">
                        <el-icon>
                          <Connection />
                        </el-icon>
                      </el-button>
                    </el-tooltip>
                  </div>
                  <el-text v-if="service.status === 'error'" type="danger" size="small" truncated>
                    {{ service.error_message }}
                  </el-text>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 空状态显示 -->
        <el-col :span="24" v-if="services.length === 0 && !loading">
          <div class="empty-container">
            <el-empty description="暂无发布的MCP服务">
              <el-button type="primary" @click="openCreateThirdPartyDialog" round>创建第三方服务</el-button>
              <el-button type="success" @click="goToCreateService" round>从模板创建</el-button>
            </el-empty>
          </div>
        </el-col>
      </el-row>

      <!-- 分页组件 -->
      <div v-if="!loading && total > 0" class="pagination-wrapper">
        <el-config-provider :locale="zhCn">
          <el-pagination 
            :current-page="currentPage" 
            :page-size="pageSize" 
            :page-sizes="[8, 12, 16, 20]"
            :background="true" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="total"
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange"
            class="pagination"
          />
        </el-config-provider>
      </div>
    </div>

    <!-- 服务参数查看/编辑对话框 -->
    <ServiceParamsDialog
      v-model="serviceParamsDialogVisible"
      :service="currentService"
      :loading="updatingParams"
      @confirm="updateServiceParamsFunc"
      @cancel="serviceParamsDialogVisible = false"
    />

    <!-- 创建第三方服务对话框 -->
    <el-dialog 
      v-model="createThirdPartyDialogVisible" 
      title="创建第三方MCP服务" 
      width="50%" 
      :destroy-on-close="true"
      class="create-dialog"
    >
      <el-form 
        ref="thirdPartyFormRef" 
        :model="thirdPartyForm" 
        :rules="thirdPartyRules" 
        label-width="120px"
        class="third-party-form"
      >
        <el-form-item label="服务名称" prop="service_name">
          <el-input 
            v-model="thirdPartyForm.service_name" 
            placeholder="请输入服务名称"
            clearable
          />
        </el-form-item>
        
        <el-form-item label="SSE URL" prop="sse_url">
          <el-input 
            v-model="thirdPartyForm.sse_url" 
            placeholder="请输入第三方MCP服务的SSE URL，如：https://example.com/sse"
            clearable
          />
        </el-form-item>
        
        <el-form-item label="服务描述" prop="description" class="required-dot">
          <el-input 
            v-model="thirdPartyForm.description" 
            type="textarea" 
            :rows="3"
            placeholder="请输入服务描述（可选）"
            clearable
          />
        </el-form-item>
        
        <el-form-item label="访问权限" prop="is_public">
          <el-radio-group v-model="thirdPartyForm.is_public">
            <el-radio :label="false">私有</el-radio>
            <el-radio :label="true">公开</el-radio>
          </el-radio-group>
          <div class="form-tip">
            <span>私有：仅自己可见和使用</span><br>
            <span>公开：所有用户可见和使用</span>
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="createThirdPartyDialogVisible = false">取消</el-button>
          <el-button 
            type="primary" 
            @click="createThirdPartyService" 
            :loading="creatingThirdParty"
          >
            创建服务
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, ElNotification, ElConfigProvider } from 'element-plus'
import { DocumentCopy, Connection, VideoPlay, VideoPause, Delete, Refresh, Plus, Setting, Lock, Search, UserFilled, Shop } from '@element-plus/icons-vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import mcpServiceApi from '@/api/mcp-service'
import type { McpServiceInfo, ServiceQueryCondition } from '@/api/type/mcp-service'
import mcpSquareApi from '@/api/mcp-square'
import mcpAuthApi from '@/api/mcp-auth'
import { copyTextToClipboard } from '../../utils/copy'
import ServiceParamsDialog from '@/components/service-params-dialog/index.vue'

const router = useRouter()
const loading = ref(false)
const services = ref<McpServiceInfo[]>([])
const currentPage = ref(1)
const pageSize = ref(8)
const total = ref(0)

// 模块和用户数据用于下拉选择
const modules = ref<{ id: number, name: string, description: string }[]>([])
const users = ref<{ id: number, username: string, is_admin: boolean }[]>([])

// 搜索条件
const searchCondition = reactive<ServiceQueryCondition>({
  name: '',
  module_id: null,
  status: '',
  user_id: null
})

// 服务参数对话框相关
const serviceParamsDialogVisible = ref(false)
const currentService = ref<McpServiceInfo | null>(null)
const updatingParams = ref(false)

// 创建第三方服务对话框相关
const createThirdPartyDialogVisible = ref(false)
const thirdPartyFormRef = ref()
const thirdPartyForm = ref({
  service_name: '',
  sse_url: '',
  description: '',
  is_public: false
})
const thirdPartyRules = ref({
  service_name: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
  sse_url: [
    { required: true, message: '请输入SSE URL', trigger: 'blur' },
    { type: 'url', message: '请输入有效的URL地址', trigger: 'blur' }
  ],
  is_public: [{ required: true, message: '请选择访问权限', trigger: 'change' }]
})
const creatingThirdParty = ref(false)

// 加载模块数据
const loadModules = async () => {
  try {
    const response = await mcpSquareApi.listModules()
    if (response && response.data) {
      modules.value = response.data.map((module: any) => ({
        id: module.id,
        name: module.name,
        description: module.description || ''
      }))
    }
  } catch (error) {
    console.error('获取模块列表失败', error)
  }
}

// 加载用户数据
const loadUsers = async () => {
  try {
    const response = await mcpAuthApi.getAllUsers()
    if (response && response.data) {
      users.value = response.data.map((user: any) => ({
        id: user.id,
        username: user.username,
        is_admin: user.is_admin || false
      }))
    }
  } catch (error: any) {
    // 非管理员可能没有权限查看用户列表，这是正常的
    console.log('获取用户列表失败（可能无权限）', error.message)
  }
}

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1 // 重置到第一页
  loadServices()
}

// 处理页码变化
const handleCurrentChange = (page: number) => {
  currentPage.value = page
  loadServices()
}

// 处理页大小变化
const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1 // 重置到第一页
  loadServices()
}

// 加载服务列表（分页）
const loadServices = async () => {
  loading.value = true
  try {
    const params = {
      paging: {
        page: currentPage.value,
        size: pageSize.value
      },
      condition: {
        name: searchCondition.name || undefined,
        module_id: searchCondition.module_id,
        status: searchCondition.status || undefined,
        user_id: searchCondition.user_id
      }
    }
    
    const response = await mcpServiceApi.listServicesPage(params, loading)
    if (response && response.data) {
      services.value = response.data.items || []
      total.value = response.data.total || 0
      currentPage.value = response.data.page || 1
      pageSize.value = response.data.size || 7
    } else {
      services.value = []
      total.value = 0
    }
  } catch (error) {
    console.error('加载服务列表失败', error)
    ElMessage.error('加载服务列表失败')
  } finally {
    loading.value = false
  }
}

// 刷新服务
const refreshServices = () => {
  loadServices()
}

// 前往创建服务页面
const goToCreateService = () => {
  router.push('/mcp/marketplace')
}

// 打开创建第三方服务对话框
const openCreateThirdPartyDialog = () => {
  // 重置表单
  thirdPartyForm.value = {
    service_name: '',
    sse_url: '',
    description: '',
    is_public: false
  }
  createThirdPartyDialogVisible.value = true
}

// 启动服务
const handleStartService = async (serviceUuid: string) => {
  try {
    ElMessage.info({ message: '正在启动服务...', duration: 0 })
    await mcpServiceApi.startService(serviceUuid, loading)
    ElMessage.closeAll()
    ElNotification({
      title: '成功',
      message: '服务已启动',
      type: 'success'
    })
    await loadServices()
  } catch (error: any) {
    ElMessage.closeAll()
    ElNotification({
      title: '错误',
      message: `启动服务失败: ${error.message || '未知错误'}`,
      type: 'error'
    })
  }
}

// 停止服务
const handleStopService = async (serviceUuid: string) => {
  try {
    ElMessage.info({ message: '正在停止服务...', duration: 0 })
    await mcpServiceApi.stopService(serviceUuid, loading)
    ElMessage.closeAll()
    ElNotification({
      title: '成功',
      message: '服务已停止',
      type: 'success'
    })
    await loadServices()
  } catch (error: any) {
    ElMessage.closeAll()
    ElNotification({
      title: '错误',
      message: `停止服务失败: ${error.message || '未知错误'}`,
      type: 'error'
    })
  }
}

// 卸载服务
const handleUninstallService = async (serviceUuid: string) => {
  try {
    // 弹出确认框
    await ElMessageBox.confirm(
      '确定要卸载此服务吗？卸载后将无法恢复。',
      '确认卸载',
      {
        confirmButtonText: '确认卸载',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    ElMessage.info({ message: '正在卸载服务...', duration: 0 })
    await mcpServiceApi.uninstallService(serviceUuid, loading)
    ElMessage.closeAll()
    ElNotification({
      title: '成功',
      message: '服务已卸载',
      type: 'success'
    })
    // 重新加载服务列表
    await loadServices()
  } catch (error: any) {
    ElMessage.closeAll()
    if (error !== 'cancel') {
      ElNotification({
        title: '错误',
        message: `卸载服务失败: ${error.message || '未知错误'}`,
        type: 'error'
      })
    }
  }
}

// 复制URL到剪贴板
const copyUrl = (url: string) => {
  copyTextToClipboard(url, 'URL已复制到剪贴板')
}

// 复制为egovakb格式的URL
const copyAsEgovakbUrl = (url: string) => {
  // 创建egovakb格式的JSON
  const egovakbFormat = JSON.stringify({
    "mcp-sse": {
      "url": url,
      "transport": "sse"
    }
  }, null, 2)

  // 复制到剪贴板
  copyTextToClipboard(egovakbFormat, 'egovakb格式URL已复制到剪贴板')
}

// 查看服务参数
const viewServiceParams = async (service: McpServiceInfo) => {
  try {
    // 获取最新的服务信息
    const response = await mcpServiceApi.getService(service.service_uuid, loading)
    if (response && response.data) {
      currentService.value = response.data
      // 初始化表单
      serviceParamsDialogVisible.value = true
    }
  } catch (error) {
    console.error('获取服务参数失败', error)
    ElMessage.error('获取服务参数失败')
  }
}

// 更新服务参数
const updateServiceParamsFunc = async (params: Record<string, any>) => {
  if (!currentService.value) return

  updatingParams.value = true
  try {
    const body = { ...params }
    // 调用API更新服务参数
    await mcpServiceApi.updateServiceParams(currentService.value.id, body, loading)
    ElMessage.success('服务参数更新成功')
    serviceParamsDialogVisible.value = false

    // 重新加载服务列表
    await loadServices()
  } catch (error) {
    console.error('更新服务参数失败', error)
    ElMessage.error('更新服务参数失败')
  } finally {
    updatingParams.value = false
  }
}

// 切换服务公开状态
const togglePublicStatus = async (service: McpServiceInfo) => {
  if (!service.can_edit) {
    ElMessage.warning('您没有权限编辑此服务')
    return
  }

  const newStatus = !service.is_public
  const statusText = newStatus ? '公开' : '私有'
  
  try {
    await ElMessageBox.confirm(
      `确定要将服务设置为${statusText}状态吗？`,
      '确认修改',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    ElMessage.info({ message: `正在设置服务为${statusText}状态...`, duration: 0 })
    await mcpServiceApi.updateServiceVisibility(service.id, { is_public: newStatus }, loading)
    ElMessage.closeAll()
    ElMessage.success(`服务已设置为${statusText}状态`)
    
    // 重新加载服务列表
    await loadServices()
  } catch (error: any) {
    ElMessage.closeAll()
    if (error !== 'cancel') {
      ElMessage.error(`设置服务状态失败: ${error.message || '未知错误'}`)
    }
  }
}

// 获取服务状态样式类名
const getStatusClass = (status: string) => {
  switch (status) {
    case 'running':
      return 'status-running'
    case 'stopped':
      return 'status-stopped'
    case 'error':
      return 'status-error'
    default:
      return 'status-unknown'
  }
}

// 获取服务状态文字
const getStatusText = (status: string) => {
  switch (status) {
    case 'running':
      return '运行中'
    case 'stopped':
      return '已停止'
    case 'error':
      return '错误'
    default:
      return '未知'
  }
}

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return '未知'
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 跳转到模块详情
const viewModuleDetail = (moduleId: number) => {
  router.push(`/mcp/marketplace/${moduleId}`)
}

// 创建第三方服务
const createThirdPartyService = async () => {
  if (!thirdPartyFormRef.value) return

  try {
    await thirdPartyFormRef.value.validate()
    creatingThirdParty.value = true
    
    const response = await mcpServiceApi.createThirdPartyService(thirdPartyForm.value, loading)
    
    if (response && response.data) {
      ElNotification({
        title: '成功',
        message: '第三方服务创建成功',
        type: 'success'
      })
      createThirdPartyDialogVisible.value = false
      await loadServices() // 重新加载服务列表
    }
  } catch (error: any) {
    ElNotification({
      title: '错误',
      message: `创建第三方服务失败: ${error.message || '未知错误'}`,
      type: 'error'
    })
  } finally {
    creatingThirdParty.value = false
  }
}

// 页面加载时获取服务列表
onMounted(async () => {
  await Promise.all([
    loadServices(),
    loadModules(),
    loadUsers()
  ])
})
</script>

<style scoped>
.mcp-services-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #f5f7fa;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: var(--app-view-padding);
  box-sizing: border-box;
}

.services-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: #fff;
  z-index: 10;
  border-bottom: 1px solid rgba(221, 221, 221, 0.8);
  border-radius: 8px 8px 0 0;
}

.header-left {
  display: flex;
  gap: 12px;
  align-items: center;
}

.header-right {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-filters {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
}

.search-input {
  width: 200px;
}

.status-select,
.module-select,
.user-select {
  width: 140px;
}

.option-text {
  flex: 1;
}

.admin-icon {
  color: #409eff;
  margin-left: 8px;
}

.mcp-services-content {
  flex: 1;
  padding: 24px;  
  background-color: #fff;
  border-radius: 0 0 8px 8px;
  .el-row {
    height: calc(100% - 50px);
    overflow-y: auto;
  }
}

.search-button {
  border-radius: 20px;
  padding: 8px 20px;
  font-weight: 500;
}

.service-col {
  margin-bottom: 24px;
}

.service-card {
  height: 100%;
  border-radius: 16px;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.service-card:hover {
  /* transform: translateY(-4px); */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.service-running {
  border-left: 4px solid #67c23a;
}

.card-content {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.service-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
}

.status-running {
  background-color: #67c23a;
  box-shadow: 0 0 0 3px rgba(103, 194, 58, 0.2);
}

.status-running::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  background-color: rgba(103, 194, 58, 0.2);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  70% {
    transform: scale(1.5);
    opacity: 0;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.status-stopped {
  background-color: #909399;
  box-shadow: 0 0 0 3px rgba(144, 147, 153, 0.2);
}

.status-error {
  background-color: #f56c6c;
  box-shadow: 0 0 0 3px rgba(245, 108, 108, 0.2);
}

.status-unknown {
  background-color: #e6a23c;
  box-shadow: 0 0 0 3px rgba(230, 162, 60, 0.2);
}

.status-text {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.public-tag {
  margin-left: 4px;
}

.service-type-tag {
  margin-right: 4px;
}

.clickable-tag {
  cursor: pointer;
  transition: all 0.3s ease;
}

.clickable-tag:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.service-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.action-button {
  font-size: 12px;
}

.no-permission-icon {
  color: #909399;
  font-size: 16px;
}

.service-info {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.service-title-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.service-label {
  font-size: 14px;
  color: #909399;
  font-weight: 500;
  white-space: nowrap;
  min-width: 40px;
}

.service-value {
  font-size: 14px;
  color: #303133;
  font-weight: 600;
  flex: 1;
  min-width: 0;
}

.service-description {
  font-size: 13px;
  color: #606266;
  margin-top: 8px;
  display: block;
}

.service-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.detail-row .service-title-row {
  margin-bottom: 0;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.detail-label {
  font-size: 12px;
  color: #909399;
  font-weight: 500;
}

.detail-value {
  font-size: 13px;
  color: #303133;
}

.url-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f5f7fa;
  border-radius: 6px;
  padding: 6px 10px;
}

.url-text {
  font-size: 13px;
  cursor: pointer;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.copy-button {
  padding: 2px;
}

.pagination-wrapper {
  display: flex;  
  justify-content: flex-end;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid #e9ecf2;
  background-color: #fff;
}

.pagination {
  /* 可以添加自定义分页样式 */
}

.empty-container {
  padding: 80px 0;
  text-align: center;
}

.create-dialog {
  border-radius: 12px;
}

.third-party-form {
  padding: 16px 0;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
  line-height: 1.4;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.mr-1 {
  margin-right: 8px;
}

/* 适配暗色主题 */
:root[data-theme="dark"] .mcp-services-container {
  background-color: #141414;
}

:root[data-theme="dark"] .services-header,
:root[data-theme="dark"] .mcp-services-content {
  background-color: #1d1e1f;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] .service-card {
  background-color: rgba(48, 49, 51, 0.8);
  border-color: #484848;
}

:root[data-theme="dark"] .add-service-card {
  background-color: rgba(48, 49, 51, 0.5);
  border-color: #606266;
}

:root[data-theme="dark"] .add-service-card:hover {
  border-color: #409eff;
}

:root[data-theme="dark"] .url-container {
  background-color: rgba(0, 0, 0, 0.2);
}
</style>